<template>
  <van-dropdown-menu>
    <van-dropdown-item v-model="value" :options="options" @change="handleArea" />
    <van-dropdown-item v-model="sex" :options="sexOpts" @change="handleSex" />
  </van-dropdown-menu>


  <van-swipe-cell>
    <div @click="handleGo(item.id)" v-for="item in list">
      <van-card :desc="item.description" :title="item.name" :price="item.sex == 1 ? '男' : '女'" class="goods-card"
        :thumb="item.photo" />
    </div>
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
</template>

<script>
import { SwipeCell } from 'vant';
import { ref, createApp, onMounted, } from 'vue';
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import Cookie from 'js-cookie'

export default {
  setup() {
    const item = ref(null);
    const value = ref(0);
    const sex = ref(0);
    const list = ref([])
    const switch1 = ref(false);
    const switch2 = ref(false);
    const router = useRouter()
    const options = [
      { text: '区域', value: 0 },
      { text: '成都青羊区', value: 1 },
      { text: '深圳福田区', value: 2 },
    ];
    const sexOpts = [
      { text: '性别', value: 0 },
      { text: '男', value: 1 },
      { text: '女', value: 2 },
    ];
    const handleArea = (val) => {
      axios.get('/mock/relative').then(res => {
        if (val) {
          list.value = res.data.data.filter(i => i.area == val)
        } else {
          list.value = res.data.data
        }
        list.value = [...list.value, JSON.parse(Cookie.get('relativeList'))]
      })
    }
    const handleSex = (val) => {
      axios.get('/mock/relative').then(res => {
        if (val) {
          list.value = res.data.data.filter(i => i.sex == val)
        } else {
          list.value = res.data.data
        }
        list.value = [...list.value, JSON.parse(Cookie.get('relativeList'))]
      })
    }

    const handleGo = (id) => {
      router.push({ name: 'detail', query: { id, type: 'relative' } })
    }
    onMounted(() => {
      axios.get('/mock/relative').then(res => {
        if (res.data.code == 200) {
          list.value = res.data.data
          list.value = [...list.value, JSON.parse(Cookie.get('relativeList'))]
        }
      })
    })


    return {
      handleGo,
      handleArea,
      handleSex,
      list,
      item,
      value,
      sex,
      switch1,
      switch2,
      options,
      sexOpts,
    };
  },
};


const app = createApp();
app.use(SwipeCell);


</script>

<style>
.goods-card {
  margin: 0;
  background-color: @white;
}

.delete-button {
  height: 100%;
}
</style>

